<template>
  <zm-dialog
    :title="dialogTitle"
    :visible.sync="value"
    append-to-body
    :before-close="dialogClose"
    :close-on-click-modal="false"
  >
    <zm-form
      ref="form"
      :model="form"
      :rules="rules"
      size="small"
      label-width="140px"
    >
      <div v-if="isCoupon" class="fb m20">电影券销售单信息</div>
      <zm-form inline>
        <el-row :gutter="20">
          <el-col :span="10">
            <zm-form-item label="销售单号:">
              <span>{{ infoData.orderNo }}</span>
            </zm-form-item>
          </el-col>
          <el-col :span="8">
            <zm-form-item label="产品名称:" v-if="isCoupon">
              <span>{{ infoData.productName }}</span>
            </zm-form-item>
          </el-col>
          <el-col :span="6">
            <zm-form-item label="销售数量:">
              <span>{{ infoData.number }}</span>
            </zm-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10">
            <zm-form-item label="关联客户:">
              <span>{{ infoData.customerName }}</span>
            </zm-form-item>
          </el-col>
          <el-col :span="8">
            <zm-form-item label="销售单价:" v-if="isCoupon">
              <span>{{ infoData.salePrice }}</span>
            </zm-form-item>
          </el-col>
          <el-col :span="6">
            <zm-form-item label="销售单总额:" v-if="isCoupon">
              <span>{{ infoData.saleTotalPrice }}</span>
            </zm-form-item>
          </el-col>
        </el-row>
      </zm-form>

      <zm-form-item label="导出字段" prop="fields">
        <zm-checkbox v-model="form.fields" :list="exportList"></zm-checkbox>
      </zm-form-item>
      <zm-form-item label="是否一码多券" prop="couponNum" v-if="isCoupon">
        <zm-data-radio
          v-model="form.isMult"
          :list="IS_TYPE"
          @change="isMultChange"
        ></zm-data-radio>
        <div v-if="form.isMult === '1'">
          <span class="vm mr10">每</span>
          <zm-input
            clearable
            v-model="form.couponNum"
            class="w100"
            placeholder="请输入张数"
          ></zm-input>
          <span class="vm ml10">张电影券合成一个新的电影券以及新的密码二维码</span>
        </div>
      </zm-form-item>
      <zm-form-item prop="mobile" label="接受校验码手机">
        <zm-input
          type="text"
          v-model="form.mobile"
          clearable
          class="w300"
          placeholder="请输入手机号码"
        ></zm-input>
      </zm-form-item>
      <zm-form-item prop="remark" label="导出备注">
        <zm-input
          type="textarea"
          v-model="form.remark"
          clearable
          class="w300"
          placeholder="请输入备注内容"
        ></zm-input>
      </zm-form-item>
    </zm-form>
    <div slot="footer" class="tr">
      <el-button size="small" @click="dialogClose">取消</el-button>
      <zm-export
        ref="export"
        :api="exportApi"
        type="warning"
        :params="exportParams"
        v-show="false"
      ></zm-export>
      <el-button type="warning" size="small" @click="submit">导出</el-button>
    </div>
  </zm-dialog>
</template>
<script>
import dialogMixin from '@/mixins/dialogMixin'
import { IS_TYPE } from '@/model/type'
import validateRule from '@/utils/validateRule'
import saleOrderApi from '@/api/src/saleOrder'
export default {
  mixins: [dialogMixin],
  props: {
    infoData: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    const checkedCouponNum = (rule, value, callBack) => {
      if (this.form.isMult === '1') {
        if (!value) {
          callBack(new Error('请输入数量'))
        } else if (+value > +this.infoData.number) {
          callBack(new Error('不能大于销售数量'))
        } else if (+value < 2) {
          callBack(new Error('不能小于2张'))
        } else {
          callBack()
        }
      }
      callBack()
    }
    return {
      form: {
        fields: '',
        isMult: '0',
        mobile: '',
        remark: '',
        orderNo: ''
      },
      IS_TYPE,
      rules: {
        fields: {
          required: true,
          message: '请选择导出字段',
          trigger: 'change'
        },
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { validator: validateRule.phone }
        ],
        couponNum: [
          { required: true, validator: checkedCouponNum, trigger: 'blur' }
        ]
      },
      exportList: []
    }
  },
  computed: {
    // productType 1兑换券，2卖品券，3点卡，4次卡，5优惠券
    isCard () {
      return (
        this.infoData.productType === '3' || this.infoData.productType === '4'
      )
    },
    isCoupon () {
      return (
        this.infoData.productType === '1' ||
        this.infoData.productType === '2' ||
        this.infoData.productType === '5'
      )
    },
    dialogTitle () {
      return '导出' + (this.isCard ? '卡' : '券')
    },
    exportApi () {
      return saleOrderApi.downCouponCard
    },
    exportParams () {
      return { ...this.form, orderNo: this.infoData.orderNo }
    }
  },
  created () {
    this.getExportList()
  },
  methods: {
    async getExportList () {
      const _res = await saleOrderApi.downCouponCardField({
        type: this.isCard ? 'card' : 'coupon'
      })
      this.exportList = _res || []
    },
    isMultChange () {
      this.$set(this.form, 'couponNum', '')
    },
    submit () {
      let _valid = false
      this.$refs.form.validate(valid => {
        _valid = valid
      })
      if (!_valid) return
      this.$refs.export.onExport()
      this.dialogClose()
    }
  }
}
</script>
